<template>
	<view class="container">
		<view class="address-wrap">
			<view class="icon">
				<image src="../../static/icon/address-logo.webp" mode="aspectFit"></image>
			</view>
			<view class="address" @click="select_address">
				<view class="name">
					<text>张三</text>
					<text>13512345678</text>
				</view>
				<view class="address-info">
					河南省郑州市中原区林山寨街道友爱路2号辉煌铭苑D座1601
				</view>
				
			</view>
			<view class="more">
				<text class="iconfont iconright"></text>
			</view>
		</view>
		
		<view class="goods-item" v-for="(item,index) in 3" :key="index" >
			<view class="title">
				西域水果官方旗舰店
			</view>
			<view class="goods-content">
				<image src="../../static/mayun.jpg" mode=""></image>
				<view class="goods-desc">
					海南西州哈密瓜天王文化净重5-6斤当季新鲜水果一箱批次哇哇哇哇
				</view>
				<view class="goods-price-wrap">
					<text>￥68.00</text>
					<text>x2</text>
				</view>
			</view>
			 
			<view class="goods-ser">
				<view class="express">
					<text>配送费用</text>
					<text>普通快递 ￥120.00</text>
				</view>
				<view class="orders-desc">
					<text>订单备注</text>
					<input type="text" value="" placeholder="选填,请先和商家协商一致" />
				</view>
			</view>
			
			<view class="sumje">
				<text>共1件</text>
				 小计: 
				<text>￥1080.00</text>
			</view>
	 
		</view>
		
		<view style="margin-bottom: 60px; opacity: 0;">
			2
		</view>
		<view class="flx-wrap">
			<text>共4件,</text>
			 合计: 
			 <text>￥1262.90</text>
			<text @click="tijiao">提交订单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			//提交按钮
			tijiao(){
				this.$request.msg('提交支付中...')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'../payment/payment'
					})
				},2000)
				
			},
			//选择地址
			select_address(){
				uni.navigateTo({
					url:'../address/address'
				})
			}
		}
	}
</script>

<style>
	.container{
		
		
	}
	/* 地址start */
	.address-wrap{
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		
		padding: 20rpx;
	}
	.address-wrap .icon{
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		
	}
	.address-wrap .icon image{
		width: 100%;
		height: 100%;
	}
	.address-wrap .address{
		
	}
	.address-wrap .address .name{
		
	}
	.address-wrap .address .name text:last-child{
		color: #999999;
		font-size: 24rpx;
		margin-left: 20rpx;
	}
	.address-wrap .address .address-info{
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #333333;
	}
	 .address-wrap .more{
		color: #bdbdbd;
	 
		margin-top: 5rpx;
 
		
		text-align: right;
	 }
	 /* 地址end */
	 
	 /* 订单item */
	 .goods-item{
		 background-color: #FFFFFF;
		 border-radius: 20px;
		 padding: 20rpx;
		 margin: 20rpx 20rpx;
	 }
	 
	 .goods-item .title{
		 
	 }

	.goods-item .goods-content{
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		
		
	}
	.goods-item .goods-content image{
		width: 160rpx;
		height: 160rpx;
		
	}
	.goods-item .goods-content .goods-desc{
		/* border: 1px solid red; */
		margin: 0 20rpx;
		flex: 4;
		font-size: 26rpx;

	}
	.goods-item .goods-content .goods-price-wrap{
		
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.goods-item .goods-content .goods-price-wrap text:last-child{
		color: #999999;
	}
	
	/* 配送 */
	.goods-item .goods-ser{
		margin-top: 40rpx;
		padding-left: 100rpx;
	}
	.goods-item .goods-ser .express{
		margin-bottom: 40rpx;
	}	
	.goods-item .goods-ser .express text:last-of-type{
		color: #999999;
		margin-left: 20rpx;
	}
	 .goods-item .goods-ser .orders-desc{
		 
		 display: flex;
		 align-items: center;
 
	 }
	.goods-item .goods-ser .orders-desc input{
		
		display: inline-block;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #999999;
		
	}
 
	 /* 总计金额 */
	 .goods-item .sumje{
		font-size: 20rpx;
		display: flex;
		justify-content: flex-end;
		margin-top: 40rpx;
	 
	 }
	 .goods-item .sumje text:first-child{
		 color: #999999;
	 }
	 .goods-item .sumje text:last-child{
		 color: red;
	 }
	 
	 
	 /* 浮动合计提交按钮 */
	 .flx-wrap{
		 position: fixed;
		 left: 0;
		 bottom: 0;
		 width: 100%;
		 height: 50px;
		 background-color: #FFFFFF;
		 display: flex;
		 justify-content: flex-end;
		 align-items: center;
	 }
	 .flx-wrap text:nth-of-type(1){
		 color: #999;
		 margin-right: 10rpx;
	 }
	 .flx-wrap text:nth-of-type(2){
	 		 color: rgb(255, 99, 0);
	 		 margin-right: 10rpx;
			 font-weight: 500;
			 font-size: 38rpx;
	 }
	 .flx-wrap text:last-of-type{
		 color: #FFFFFF;
		 background-color: rgb(255, 112, 0);
		 height: 40px;
		 width: 100px;
		 text-align: center;
		 line-height: 40px;
		 border-radius: 30px;
		 font-weight: 500;
	 }
	 

	 
</style>
